<template>
	<!-- 分享朋友圈 -->
	<div class="shareCOF">
		<div class="shareCOF_img">
			<img src="https://image.soole.com.cn/00cop.png" alt="">
		</div>
		<div class="fx-tiem">
			<div class="pr_time">
				<ul>
					<li class='pr_timing'><span>{{hours| tiemParse(0)}}</span></li>
					<li class='pr_timing'><span>{{hours| tiemParse(1)}}</span></li>
					<li class='pr_pun'>:</li>
					<li class='pr_timing'><span>{{minutes|tiemParse(0)}}</span></li>
					<li class='pr_timing'><span>{{minutes|tiemParse(1)}}</span></li>
					<li class='pr_pun'>:</li>
					<li class='pr_timing'><span>{{seconds|tiemParse(0)}}</span></li>
					<li class='pr_timing'><span>{{seconds|tiemParse(1)}}</span></li>
				</ul>
				<div class="pr_cent">
					<div class="pr_img">
						<img src="https://image.soole.com.cn/1575421450.png" alt="">
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hours: "00",
				minutes: "00",
				seconds: "00",
				show:false,//是否弹出
			}
		},
		mounted() {
			this.startTimer();
		},
		methods: {
			//倒计时
			countDown(maxtime) {
				let date = new Date();
				let gl = date.getTime();
				// 先算出剩余时间有多少小时，这些小时有多少个24小时 不满24小时的及为剩余多少小时
				this.hours = Math.floor(maxtime / 60 % 24);
				// 换算 多少分钟 满足60分的为小时数 不满60分的及为剩余分钟数
				this.minutes = Math.floor(maxtime / 60 % 60);
				// 满足60秒的为分钟数 不满60秒的及为剩余秒数
				this.seconds = Math.floor(maxtime % 60);
				//判断总的秒数是否小于=0 是则结束定时器
				if (maxtime <= 0) {
					return maxtime;
				}
				// var msg = "距离结束还有"+ this.hours +"时"+ this.minutes + "分" + this.seconds + "秒";
				// console.log(msg);
			},
			// 设置定时器
			startTimer() {
				var maxtime = 24 * 60 * 60;
				this.timer = setInterval(() => {
					var curTime = this.countDown(maxtime);
					if (curTime <= 0) {
						clearInterval(this.timer);
						this.timer = null;
					}
					--maxtime;
				}, 1000);
			},
		},
		filters:{
			tiemParse(item,i){
				let str = "";
				item = item.toString();
				if(item.length==1){
					str = 0+item;
				}else if(item.length==0) {
					str = '00';
				}else if(item.length==2){
					str = item;
				}
				if(i==0){
					return str.split("")[0];
				}else if(i=1){
					return str.split("")[1];
				}
				
			}
		}
	}
</script>

<style lang="scss"scoped>
	.shareCOF{
		 position: relative;
		.shareCOF_img{
			width: 100%;
			img{
				width: 100%;
			}
		}
		.fx-tiem{
			display: flex;
			width: 100%;
			justify-content: center;
			position: absolute;
			bottom: 13%;
		}
		.pr_time {
			width: 220px;
			display: flex;
			flex-direction: column;
			ul{
				display: flex;
				justify-content: space-around;
				color: #FFFFFF;
				font-size: 22px;
				font-weight: 700;
				margin-bottom: 18px;
				.pr_pun{
					line-height: 40px;
					color: #fff;
					font-size: 14px;
				}
				.pr_timing{
					border-radius: 3px;
					width: 27px;
					height: 39px;
					background-color: #D50039;
					position: relative;
					span{
						position: absolute;
						top:50%;
						left:50%;
						transform: translate(-50%,-50%);
					}
				}
			}	
		}
		
		.pr_cent{
			display: flex;
			justify-content: center;
			.pr_img{
				width: 125px;
				height: 125px;
				img{
					width: 100%;
					height: 100%;
				}
			}	
		}
		 
	}
</style>
